<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单练习</title>
    <!--引入外部第三方css文件 rel固定值:样式表，her链接地址
    .min意思最小文件，压缩(把文件所有内容换行和空格缩进都去掉)一行,
    -->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>

    </style>
</head>
<body>
    <div class="container">
        <h3>学生信息管理系统mis</h3>

      <div class="form-group">
          <!--for属性光标定位,点击后-->
          <label for="name">姓名:</label><br>
          <!--文本输入框 h5新特性placeholder-->
          <input type="text" name="name" id="name"
          class="form-control" 
          placeholder="请输入姓名..." 
          />
      </div>
      <div>
        <label class="form-group">年龄:</label><br>
        <input type="number" name="age" id="age" placeholder="请输入年龄..."
        class="form-control"
        />
      </div>
      <div class="form-group">
          <label for="sex">性别:</label>
          <!--radio互斥，同名会只能选择一个-->
           <div class="radio-inline">
          <input  type="radio" name="sex" id="sex"/>男</div>
          <div class="radio-inline">
          <input/ type="radio" name="sex" id="sex">女</div>
      </div>
      <div class="form-group">
          <label for="hobby">爱好:</label>
          <div class="radio-inline">
          <input type="checkbox" name="hobby" id="hobby"/>乒乓球
        </div><div class="radio-inline">
          <input type="checkbox" name="hobby" id="hobby"/>爬山 
        </div><div class="radio-inline">
            <input type="checkbox" name="hobby" id="hobby"/>听音乐 
        </div>
        </div>
      <div>
          <label>学历:</label>
          <select name="edu" id="edu">
              <!--单选，选择"幼儿园",表单提交"1" 性能高-->
              <option value="1">幼儿园</option>
              <option value="2">小学</option>
              <option value="3">初中</option>
              <option value="4">高中</option>
              <option value="5">大专</option>
              <option value="6">本科</option>
              <option value="7">研究生</option>
              <option value="8">博士</option>
          </select>
      </div>
      <div class="form-group">
          <!--class属性支持多个样式，样式之间空格隔开-->
          <input class="btn btn-primary" type="button" name="submit" value="保存"/>
          <button class="btn btn-danger" name="clear">取消</button>
      </div>
    </div>
</body>
</html>